<template>
  <!-- 模块1 -->
  <div class="modular">
    <div class="modular_top">
      <div class="triangle"></div>
      <div class="modular_icon">
        <img src="@/assets/img/zl.png" alt="">
      </div>
      <h2>{{info.site_name}}</h2>
    </div>
    <div class="overview_item">
      <div class="item_left">
        <img :src="'http://122.224.205.42:6001' + info.image_path" alt="">
      </div>
      <div class="item_cont">
        <ul>
          <li><span>安装日期：</span><span>{{info.built_date}}</span></li>
          <li><span>建筑面积：</span><span>{{info.acreage}}㎡</span></li>
          <li><span>今年平均日照时长：</span><span>{{info.sunshine_duration}}h</span></li>
          <li><span>设计功率：</span><span>{{info.capacity}}KW</span></li>
          <li><span>年计划发电量：</span><span>{{info.planned_power}}MWh/年</span></li>
          <li><span>预期降低成本：</span><span>{{info.cost_saving}}元/kwh</span></li>
          <li><span>所在区域：</span><span>{{info.install_address}}</span></li>
          <li><span>建设厂商：</span><span>{{info.manufactor_type}}</span></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/assets/utils/api.js'
export default {
  data() {
    return {
      info: {},
      tenantid: 1128
    }
  },
  created() {
    // 接口参数
    this.getData()
  },
  async mounted() {
  },
  methods: {
    async getData() {
      const res = await api.siteInfo({ tenantid: this.tenantid })
      this.info = res.data[0]
    }
  }
}
</script>

<style lang="scss" scoped>
.overview_item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0.62rem 0.19rem 0 0.19rem;

  .item_left {
    width: 49%;
    height: 1.95rem;
    // border: 1px solid #fff;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .item_cont {
    width: 50%;

    ul {
      width: 100%;
      padding-top: 0.02rem;

      li {
        display: flex;
        margin-bottom: 0.08rem;

        span {
          font-size: 0.12rem;

          &:nth-child(1) {
            color: #fff;
            width: 54%;
            text-align: right;
          }

          &:nth-child(2) {
            width: 46%;
            color: #17E8FF;
            font-weight: bold;
            padding-left: 0.05rem;
          }
        }
      }
    }
  }
}
</style>